<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
  <TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="/static/css/zTreeStyle/zTreeStyle.css" type="text/css">
  <link rel="stylesheet" type="text/css" href="/static/css/flexigrid.pack.css" />
  <style>
	body {
	background-color: white;
	margin:0; padding:0;
	text-align: center;
	}
	div, p, table, th, td {
		list-style:none;
		margin:0; padding:0;
		color:#333; font-size:12px;
		font-family:dotum, Verdana, Arial, Helvetica, AppleGothic, sans-serif;
	}
	#testIframe {margin-left: 10px;}
    #search_div{
    		background-image: url('/static/images/news_sousuo_bj.jpg');
    		border: 1px solid #D6E0EA;
    		height: 25px;
    		margin-top: 0px;
    		margin-right: 10px;
    		white-space: nowrap;
    		font: 12px Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;
    	}
    	#news_topsearch1{
    		text-align: center;
    		width: 48px;
    		height: 25px;
    		line-height: 25px;
    		float: left;
    		margin-right: 5px;
    		background: url('/static/images/news_sousuo_leftbj.gif') no-repeat scroll center center transparent;
    	}
    	#news_topsearch2{
    		height: 23px;
    		line-height: 23px;
    		float: left;
    		width: 93%;
    	}
    	#action_Search{
    		background: url('/static/images/images_icon.gif') no-repeat scroll -650px -105px transparent;
    		padding: 0px 0px 1px 18px;
    	}
  </style>
<script type="text/javascript" src="/static/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="/static/js/flexigrid.pack.js"></script>
<script type="text/javascript" src="/static/js/m.gridutils.js" type="text/javascript"></script>

  <SCRIPT type="text/javascript" >
	var zTree;
	var demoIframe;
	var setting = {
		view: {
			dblClickExpand: false,
			showLine: true,
			selectedMulti: false
		},
		data: {
			simpleData: {
				enable:true,
				idKey: "id",
				pIdKey: "pId",
				rootPId: "0"
			}
		},
		callback: {
			beforeClick: beforeClick,
            onClick: onClick
		}
	};

    var zNodes=[];
	$(document).ready(function(){
        $.ajax({
            async:false,
            cache:false,
            type:"POST",
			data:{sel:"employee"},
            dataType:"json",
            url:"/page/personnel/RedisVisibleManage/area_tree",
            error:function(){alert("请求失败");},
            success:function(data){zNodes=eval(data);}
        });
        var t = $("#tree");
		t = $.fn.zTree.init(t, setting, zNodes);
		demoIframe = $("#testIframe");
		demoIframe.bind("load", loadReady);
		var zTree = $.fn.zTree.getZTreeObj("tree");
		zTree.selectNode(zTree.getNodeByParam("id", 101));
        
        $("#flex2").flexigrid({
            url: '/page/personnel/RedisVisibleManage/redis_personnel',
            method:'post',
            dataType: 'json',
            colModel : [
                {display: '人员编号', name : 'pin', width : 150, sortable : true, align: 'center'},
                {display: '人员姓名', name : 'name', width : 150, sortable : true, align: 'center'},
                {display: '卡号', name : 'card', width : 150, sortable : true, align: 'center'},
                {display: '职位编号', name : 'positionCode', width : 150, sortable : true, align: 'center'},
                {display: '考勤区域', name : 'area', width : 150, sortable : true, align: 'left'}
                ],
            buttons : [],
            sortname: "pin",
            sortorder: "asc",
            usepager: true,
//            title: 'Personel',
            useRp: true,
            rp: 10,
            showTableToggleBtn: true,
            width: 1316,
            height: 300
        });   
	});

    $(function(){
        $("#id_query").click(query);
        $("#search_div").find("input:first").focus();
        $("#search_div").find("input").keydown(function(event){//按回车键直接查询
        if(event.keyCode==13)
            {
                $("#search_div").find("#id_query").click();
            }
        });
    });
    			
    function query(){
        var pin = $("#pin").val();
//        var card=$("#card").val();
        var url = "/page/personnel/RedisVisibleManage/redis_personnel";
        $("#flex2").flexOptions({url:url,newp:1,params:[{name:'pin',value:pin}]}).flexReload();
    }
    
    function beforeClick(treeId, treeNode){
        var zTree = $.fn.zTree.getZTreeObj("tree");
        if (treeNode.isParent) {
            zTree.expandNode(treeNode);
        } else{
            var datas = treeNode.name
            var url = "/page/personnel/RedisVisibleManage/redis_personnel";
            $("#flex2").flexOptions({url:url,params:[{name:'node',value:datas}]}).flexReload();
        }
    }
    function onClick(){
    }
	function loadReady() {
		var bodyH = demoIframe.contents().find("body").get(0).scrollHeight,
		htmlH = demoIframe.contents().find("html").get(0).scrollHeight,
		maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH),
		h = demoIframe.height() >= maxH ? minH:maxH ;
		if (h < 530) h = 530;
		demoIframe.height(h);
	}

  </SCRIPT>
 </HEAD>

<BODY>
<TABLE border=0 height=100% align=left>
	<TR>
		<TD width=225px align=left valign=top style="BORDER-RIGHT: #999999 1px dashed">
			<ul id="tree" class="ztree" style="width:225px; overflow:hidden;"></ul>
		</TD>
		<TD width=98% align=left valign=top>
        <div id = "search_div" class="news_topsearch">
        <table border="0" cellpadding="0" cellspacing="0" width="98%" height="100%">
        	<tbody><tr>
        		<td width="50"><div id="news_topsearch1">查询</div></td>
        		<td>
        			<div id="news_topsearch2">
        				<table style="margin:-3px 0px 0px 15px">
        					<tbody><tr>
                                <td><div class="lineH22"><label for="pin">人员编号&nbsp;</label></div></td><td><input id="pin" name="where" type="text"> &nbsp;&nbsp;</td>
                              <!-- <td><div class="lineH22"><label for="deptcode">人员卡号&nbsp;</label></div></td><td><input id="card" name="where" type="text"> &nbsp;&nbsp;</td> -->  
                                <td><div style="margin:0px 0px 0px 5px;"><span id="action_Search">&nbsp;</span><a id="id_query" href="javascript:void(0)" class="Link_blue1">查询</a></div></td>
        					</tr>
        					<tr><td colspan="3">
        						<div id="id_ReturnMsg" class="div_ReturnMsg"></div></td>
        					</tr>
        				</tbody></table>
        			</div>
        	     </td>
        	  </tr>
        </tbody></table></div>
        <table id="flex2"></table>
        </TD>
	</TR>
</TABLE>

</BODY>
</HTML>
